  <template>
    <ion-page>
      <ion-header>
        <ion-toolbar>
          <ion-buttons slot="start">
                <ion-back-button></ion-back-button>
            </ion-buttons> 
          <ion-title>{{ title }}</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <form @submit.prevent="submitForm">
          <ion-item>
            <ion-label  for="inputValue1-input" position="stacked" :class="{ 'required-label': selectedOption === 'real' }">Event Name:</ion-label>
            <ion-input  input-id="inputValue1-input" v-model="inputValue1" :required="selectedOption==='real'"></ion-input>
          </ion-item>
   
          <ion-item>
            <ion-label for="inputValue2-input" position="stacked">SVOM BURST ID:</ion-label>
            <ion-input inputValue1="inputValue2-input" v-model="inputValue2" ></ion-input>
          </ion-item>
          <br />
            <ion-radio-group  v-model="selectedOption">
              <ion-item lines="none">
                <ion-label>Real</ion-label>
                <ion-radio value="real" slot="start"></ion-radio><br />
              </ion-item>
              <ion-item lines="none">
                <ion-label>False</ion-label>
                <ion-radio value="False" slot="start"></ion-radio><br />
              </ion-item>
            </ion-radio-group>  
            <br />
            <br />        
            <ion-button @click="submit" type="submit" fill="outline" expand="block">Submit</ion-button>
        </form>
      </ion-content>
    </ion-page>
  </template>
   
  <script setup>
  import { ref } from 'vue';
  //import { useRouter } from 'vue-router';
  import { IonContent,
    IonRadio,
    IonButtons,
    IonBackButton,
    IonRadioGroup,
    IonButton,
    IonTitle,
    IonInput,
    IonLabel,  
    IonPage,
    IonHeader,
    IonToolbar,
    IonItem,
    } from '@ionic/vue';
import service from '@/api/api';
   
  const title = 'Validate Event';
  const selectedOption = ref(null);
  const inputValue1 = ref('');
  const inputValue2 = ref('');
   
  //const router = useRouter();
  const submit= async() => {
    if (selectedOption.value !== null){
      if (selectedOption.value === 'real' && !inputValue1.value ) {
        alert('event name is not Empty!');
        return;
      }
      try {
    // 使用axios发送数据
    const response = await service.post('/alertApi/validate', {
      inputValue1: inputValue1.value,
      inputValue2:inputValue2.value,
      selectedOption: selectedOption.value
    });
    console.log(response.data);
    alert('success');
  } catch (error) {
    console.error(error);
  }
  console.log('提交的选项:', selectedOption.value);
  }else {
    alert('please judge');
  }  
};
 
  

  </script>

  <style scoped>
    ion-radio {
    --border-radius: 4px;
    --inner-border-radius: 4px;

    --color: #ddd;
    --color-checked: #6815ec;
  }

  ion-radio.ios::part(container) {
    width: 20px;
    height: 20px;

    border: 2px solid #ddd;
    border-radius: 4px;
  }

  .radio-checked.ios::part(container) {
    border-color: #6815ec;
  }
.required-label::after {
  content: '*';
  color: red;
}
</style>